<template>
	<div class="app">
		<div class="app-view">
			<transition :name="transitionName">
				<router-view></router-view>
			</transition>
		</div>
		<tab-bar></tab-bar>
		<activation-code></activation-code>
		<agreement></agreement>
	</div>
</template>

<script>
import tabBar from '@/components/tab-bar.vue'
import activationCode from './components/activation-code.vue';
import agreement from './components/agreement.vue';
export default {
	data() {
		return {
			transitionName: "slide-left",
		}
	},
	components: {
		tabBar,
		activationCode,
		agreement
	},
	watch: {
		$route(to, from) {
			//如果to索引大于from索引,判断为前进状态,反之则为后退状态
			to.meta.index > from.meta.index ? this.transitionName = "slide-left" : 
			to.meta.index < from.meta.index ? this.transitionName = "slide-right": this.transitionName = '';
		},
  	},
	mounted() {
    	this.$store.dispatch('getDeviceInfo');
	},
};
</script>
<style lang="scss" scoped>
.app {
	position: absolute;
	width: 100%;
	height: 100%;
    background: #f7f8fa;
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease-in-out;
  width: 100%;
  position: absolute;
  overflow: hidden;
}
.slide-left-enter {
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter-to {
  transform: translate3d(0, 0, 0);
}
.slide-left-leave {
  transform: translate3d(0, 0, 0);
}
.slide-left-leave-to {
  transform: translate3d(-100%, 0, 0);
}
.slide-right-enter {
  transform: translate3d(-100%, 0, 0);
}
.slide-right-enter-to {
  transform: translate3d(0, 0, 0);
}
.slide-right-leave {
  transform: translate3d(0, 0, 0);
}
.slide-right-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>
